<template>
    <div class="app-home-box">
        <mt-swipe :auto="4000">
            <mt-swipe-item><img src="@/assets/images/ycgbz.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/images/qsyk.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/images/ra.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/images/gjxpx.jpg" alt=""></mt-swipe-item>       
        </mt-swipe>  
        <div class="home-con">
            <ul class="home-con-list">
                <li>
                    <a href="http://www.361sport.com/Tel/Subject/rain.html">
                        <img src="@/assets/images/20180929.jpg" alt="">
                        <h2>雨屏跑鞋全新上市</h2>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img class="min" src="@/assets/images/special181008.jpg" alt="">
                        <h2>欲善其事，必先利其器</h2>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img class="min" src="@/assets/images/3.jpg" alt="">
                        <h2>361°成为2018年亚运会官方合作伙伴</h2>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img class="min" src="@/assets/images/4.jpg" alt="">
                        <h2>商城</h2>
                    </a>
                </li>
            </ul>
            <ul class="home-con-product">
			    	<li class="clearfloat">
			    		<a href="">
				    		<img src="http://361cdn.361sport.com/tel/images/product1.jpg">
				    		<!-- <div class="float-text"><span>跑步产品入口</span></div> -->
                <router-link to="/goods" tag="div" class="float-text"><span>跑步产品入口</span></router-link>
			    		</a>
			    	</li>
			    	<li class="clearfloat">
			    		<a href="">
				    		<!-- <div class="float-text"><span>综训产品入口</span></div> -->
                <router-link to="/goods" tag="div" class="float-text"><span>综训产品入口</span></router-link>
				    		<img src="http://361cdn.361sport.com/tel/images/product2.jpg">
			    		</a>
			    	</li>
			    	<li class="clearfloat">
			    		<a href="">
				    		<img src="http://361cdn.361sport.com/tel/images/product3.jpg">
				    		<!-- <div class="float-text"><span>篮球产品入口</span></div> -->
                <router-link to="/goods" tag="div" class="float-text"><span>篮球产品入口</span></router-link>
			    		</a>
			    	</li>
			</ul>
            <ul class="bottom-nav">
				<li>
					<span class="title" @click="show1=!show1">关于361°<em class="changedeg">></em></span>
					<ul class="navcontent" v-if="show1" >
						<li><a href="/Tel/About/index.html">集团简介</a></li>
						<li><a href="/Tel/About/info.html?info=11">社会责任</a></li>
						<li><a href="/Tel/About/info.html?info=12">品牌历程</a></li>
						<li><a href="/Tel/About/info.html?info=13">品牌新闻</a></li>
						<li><a href="/Tel/Jobs/index.html">集团招聘</a></li>
						<li><a href="/Tel/About/info.html?info=14">联系我们</a></li>
					</ul>
				</li>
				<li>
					<span class="title" @click="show2=!show2">如何购物<em>></em></span>
					<ul class="navcontent" v-if="show2">
						<li><a href="/Tel/About/info.html?info=1">购物流程</a></li>
						<li><a href="/Tel/About/info.html?info=2">订单查询</a></li>
						<li><a href="/Tel/About/info.html?info=15">会员及积分体系</a></li>
					</ul>
				</li>
				<li>
					<span class="title" @click="show3=!show3">支付方式<em>></em></span>
					<ul class="navcontent" v-if="show3">
						<li><a href="/Tel/About/info.html?info=3">支付方式</a></li>
						<li><a href="/Tel/About/info.html?info=4">发票说明</a></li>
					</ul>
				</li>
				<li>
					<span class="title" @click="show4=!show4">物流配送<em>></em></span>
					<ul class="navcontent" v-if="show4">
						<li><a href="/Tel/About/info.html?info=5">配送时间和范围</a></li>
						<li><a href="/Tel/About/info.html?info=6">配送费用</a></li>
						<li><a href="/Tel/About/info.html?info=7">商品验收</a></li>
					</ul>
				</li>
				<li>
					<span class="title" @click="show5=!show5">售后服务<em>></em></span>
					<ul class="navcontent" v-if="show5">
						<li><a href="/Tel/About/info.html?info=9">退换货流程</a></li>
						<li><a href="/Tel/About/info.html?info=8">售后服务政策</a></li>
					</ul>
				</li>
			</ul>
            <div class="home-con-contact">
				<p>全国服务热线</p>
				<p>400-6661-361</p>
				<p>在线时间：周一至周五</p>
				<p>(9:00-12:00 13:00-18:00)</p>
				<p class="custom-service">== 361在线客服 ==</p>
				<p>QQ:476849964</p>
			</div>
            <div class="home-con-illustrate">
				<p>中国 闽ICP备05003868号</p>
				<p>©2013 三六一度(中国)有限公司</p>
				<p>All Rights Reserved</p>
			</div>
        </div>
    </div>
</template>
<script>

import { Swipe, SwipeItem } from 'mint-ui';



export default {
  data(){
    return{
      show1:false,
      show2:false,
      show3:false,
      show4:false,
      show5:false,

    }
  },
    components:{
        "mt-swipe":Swipe,
        "mt-swipe-item":SwipeItem
    },
    methods:{
      showCont:function(){
        this.show=!this.show

      },
      changedeg:function(){
      var change=document.querySelector('.changedeg')
        if(this.show){
    
          change.style.cssText=`transform:rotate(90deg)`
        }else{
          change.style.cssText=`transform:rotate(0deg)`
        }
      }
    },
    mounted(){
      
      
    }
}
</script>


<style lang="stylus" scoped>
@import '~styles/_base.styl'
@import '~styles/_reset.styl'
    .app-home-box
      background-color #000
      position relative
      top .5rem
      .mint-swipe
        width 3.75rem
        height 4.8rem
      img 
        width 3.75rem
        height 4.8rem 
    .home-con
        .home-con-list
          li
            margin-top .15rem
            position relative
            img 
              width 3.752rem
              height 3.752rem
            .min
              width 3.752rem
              height 1.8rem
            h2
              font-size .15rem
              color #fff
              height .4rem
              line-height .4rem
              background rgba(0,0,0,0.6)
              position absolute
              bottom 0
              width 100%
              text-align center
    .home-con-product
      margin .1rem 0
      .clearfloat
          height 1.18rem
          width 3.75rem
        img 
          float left
          width 50%
          height 1.18rem 
         .float-text
            float left
            width 50%
            span 
              display table
              width 1.25rem
              height .3rem
              border .01rem solid #1a1a1a
              margin 0 auto
              color #fff
              text-align: center
              line-height .3rem
              margin-top 23%
              font-size .16rem
    .bottom-nav
      padding 0 .1rem
      width auto
      margin 0   
      li
        .title
          display block
          font-size .15rem
          border-bottom .01rem solid #1a1a1a
          padding .14rem 0
          color #fff
    .navcontent
      li
        a
          text-indent 1em
          border none
          color #fff
          padding .14rem 0
          font-size .15rem
          line-height .4rem
          padding-left .15rem
    em
      float right
      width .1rem
      height .1rem
      background-size 100%
      margin-right .1rem
      margin-top .02rem
      color #cccccc
    .home-con-contact
      padding .1rem
      border-bottom .01rem solid #1A1A1A
      p
        font-size .15rem
        color #fff
        line-height .2rem 
      .custom-service
        margin-top .1rem
    .home-con-illustrate
      border none 
      padding .1rem
      padding-bottom .2rem
      p
        font-size .15rem
        color #fff
        line-height .2rem 
        opacity .5
        
        
</style>

